﻿<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>index</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/vue.js"></script>
  <link rel="stylesheet" href="css/comon0.css">
</head>


<script>


  $(window).load(function () {
    $(".loading").fadeOut()
  })

  /****/
  $(document).ready(function () {
    var whei = $(window).width()
    $("html").css({ fontSize: whei / 20 })
    $(window).resize(function () {
      var whei = $(window).width()
      $("html").css({ fontSize: whei / 20 })
    });
  });
</script>

<script type="text/javascript" src="js/echarts.min.js"></script>

<script src="js/echarts-gl.min.js"></script>

<script src="js/map.js"></script>
<script language="JavaScript" src="js/js.js"></script>

<body>
  <div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
  </div>
  <div class="loading">
    <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
  </div>
  <div class="head">
    <h1>府谷县能源局电子封条智能监管平台</h1>
    <div class="weather">
      <!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span>
    </div>

    <script>
      var t = null;
      t = setTimeout(time, 1000);//開始运行
      function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行     
      }

    </script>


  </div>
  <div id="app">
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: 6.55rem">
            <div class="alltitle">联网情况</div>
            <div class="list">
              <div class="item_left" v-for="(item ,index) in leftData">
                <img src="./images/networking.png">
                <div class="">
                  <div class="">
                    {{item.sum}}<span>座</span>
                  </div>
                  <div class="">
                    {{item.title}}
                  </div>
                </div>
                <div class="">
                  <div style="color: rgb(58,229,239);">
                    {{item.communicateNum}}<span>座</span>
                  </div>
                  <div class="">
                    已联网
                  </div>
                </div>
                <div class="">
                  <div class="" style="font-size: 8px;">
                    <span style="color:rgb(66, 217, 187);font-size: .3rem;">{{item.proportion1}}</span> <span
                      style="color:rgb(66, 217, 187);"> / </span> <span
                      style="color:rgb(241,116,16);font-size: .3rem;">{{item.proportion2}}</span> <span>座</span>
                  </div>
                  <div class="">
                    在线/离线
                  </div>
                </div>



              </div>


            </div>
            <!-- <div class="boxall" style="height: 3.2rem">
          <div class="alltitle">模块标题样式</div>
          <div class="allnav" id="echart2"></div>
          <div class="boxfoot"></div>-->
        </div> 
            <div class="boxall" style="height: 3.2rem">
              <div class="alltitle">煤矿报警次数占比</div>
              <div style="height:100%; width: 100%;" id="fb1">
                <!-- <div class="sy" id="fb1"></div> -->
                <!-- <div class="sy" id="fb2"></div> -->
                <!-- 	<div class="sy" id="fb3"></div> -->
              </div>
              <div class="boxfoot">

              </div>
            </div>
        </li>
        <li>
          <div class="bar">
            <div class="barbox">

              <ul class="clearfix">
                <li class="pulll_left counter">{{num.cameraSum}}</li>
                <li class="pulll_left counter">{{num.alarmSum}}</li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left">摄像头数量 </li>
                <li class="pulll_left">{{num.time}}年总警报数</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="map1"><img src="picture/lbx.png"></div>
            <div class="map2"><img src="picture/jt.png"></div>
            <div class="map3"><img src="picture/map.png"></div>
            <div class="map4" id="map_1"></div>
          </div>
          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">煤矿报警次数比较</div>
            <div class="allnav" id="echart5"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height: 4.4rem">
            <div class="alltitle">报警分析</div>
            <div class="list">
              <div class="right_title"><img src="./images/alarm.png" alt=""> 本年报警</div>
              <div class="item_right ">

                <div class="">
                  <div class="">
                    {{year.sum}}
                  </div>
                  <div class="">
                    报警总数
                  </div>
                </div>
                <div class="">
                  <div style="color: rgb(241,116,16);">
                    {{year.unfinished}}
                  </div>
                  <div class="">
                    未处理
                  </div>
                </div>
                <div class="">
                  <div class="" style="color:rgb(58,229,239);">
                    {{year.completed}}
                  </div>
                  <div class="">
                    已处理
                  </div>
                </div>
              </div>
              <div class="right_title"><img src="./images/alarm.png" alt=""> 本周报警</div>
              <div class="item_right ">

                <div class="">
                  <div class="">
                    {{week.sum}}
                  </div>
                  <div class="">
                    报警总数
                  </div>
                </div>
                <div class="">
                  <div style="color: rgb(241,116,16);">
                    {{week.unfinished}}
                  </div>
                  <div class="">
                    未处理
                  </div>
                </div>
                <div class="">
                  <div class="" style="color:rgb(58,229,239);">
                    {{week.completed}}
                  </div>
                  <div class="">
                    已处理
                  </div>
                </div>
              </div>
              <div class="right_title"><img src="./images/alarm.png" alt=""> 今日报警</div>
              <div class="item_right ">

                <div class="">
                  <div class="">
                    {{day.sum}}
                  </div>
                  <div class="">
                    报警总数
                  </div>
                </div>
                <div class="">
                  <div style="color: rgb(241,116,16);">
                    {{day.unfinished}}
                  </div>
                  <div class="">
                    未处理
                  </div>
                </div>
                <div class="">
                  <div class="" style="color:rgb(58,229,239);">
                    {{day.completed}}
                  </div>
                  <div class="">
                    已处理
                  </div>
                </div>
              </div>




            </div>

          </div>
          <div class="boxall" style="height: 2rem;padding: 0;">
            <!-- <div class="alltitle">模块标题样式3</div> -->
            <div class="allnav" style="height: 100%;" id="echart6"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height:3.2rem">
            <div class="alltitle">煤矿报警次数统计</div>
            <div class="allnav" id="echart4"></div>
            <div class="boxfoot"></div>
          </div>


        </li>
      </ul>
    </div>
    <div class="back"></div>
  </div>
  <script type="text/javascript" src="js/dom.js"></script>
  <!-- <script type="text/javascript" src="js/area_echarts.js"></script> -->
</body>

</html>